<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>multiselect</title>
		<script type="text/javascript">var CTP_WEB_FULLPATH = "../../"</script>
		<script type="text/javascript" src="../../js/jquery/jquery.js"></script>
        <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js"></script>
        <script type="text/javascript" src="../../js/ctp/public/ctp.core.js"></script>
		<script type="text/javascript" src="../../js/ctp/public/jsextend.js"></script>
		<script type="text/javascript" src="../../js/ctp/action/ctp.action.chain.js"></script>
		<script type="text/javascript" src="../../js/ctp/multiselect/ctp.ui.multiselect.js"></script>
		<!--link href="multiselect.css" rel="stylesheet" type="text/css"/-->
		<link href="../../css/multiselect.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/skins/red/ctp-common.css" rel="stylesheet" type="text/css"/>
		<script>
			var multiselect;
			var multiselect2;
			var chain1;
			$(document).ready(
				function(){
					multiselect2 = new ctp.ui.multiselect({
						id:'multiselect2',
						//items:[{'text':'中国','value':'China','selected':true},{'text':'日本','value':'Japan'},{'text':'美国','value':'America'},{'text':'意大利','value':'Italy'},{'text':'韩国','value':'Korea'},{'text':'印度','value':'India'},{'text':'俄罗斯','value':'Russia'},{'text':'澳大利亚','value':'Australia'},{'text':'英国','value':'England'}],
						//remote:{"url":'multiselect_data.json'},
						//delBtnArray:['upper','up','right','allright'],
						delBtnArray:['upper','up','allright'],
						//onchange:function(){alert(1)},
						renderTo:'container'
					});
					chain1=new ctp.action.chain({
					 	 id : 'action1',	   	      
				     	 target :multiselect2,	         		
				     	 url :'multiselect_data.json'
					 });
					multiselect = new ctp.ui.multiselect({
						id:'multiselect1',
						//items:[{'text':'中国','value':'China','selected':true},{'text':'日本','value':'Japan'},{'text':'美国','value':'America'},{'text':'意大利','value':'Italy'},{'text':'韩国','value':'Korea'},{'text':'印度','value':'India'},{'text':'俄罗斯','value':'Russia'},{'text':'澳大利亚','value':'Australia'},{'text':'英国','value':'England'}],
						remote:{url:'multiselect_data.json'},
						icon:'cmp',
						//chainTarget:[chain1],
						//onchange:function(){alert(1)},
	
						renderTo:'container'
					});
					//multiselect.setValue('China,Japan,sdf,America');
					//multiselect.setValue(['China','Japan','sdf','America']);
					//multiselect.reloadItems([{'text':'中国','value':'China','selected':true},{'text':'日本','value':'Japan'},{'text':'美国','value':'America'},{'text':'意大利','value':'Italy'},{'text':'韩国','value':'Korea'},{'text':'印度','value':'India'},{'text':'俄罗斯','value':'Russia'},{'text':'澳大利亚','value':'Australia'},{'text':'英国','value':'England','selected':true}])
					
				}
			);
			function render(){
				multiselect.renderTo('container');
			}
			function getwidth(){
				alert(multiselect.getWidth());
			}
			function setwidth(){
				multiselect.setWidth($('#input').val());
			}
			function getviewrow(){
				alert(multiselect.getViewRow());
			}
			function setviewrow(){
				multiselect.setViewRow($('#input').val());
			}
			function setDisabled(value){
				multiselect.setDisable(value);
			}
			function getDisabled(){
				alert(multiselect.isDisable());
			}
			function getVisible(){
				alert(multiselect.getVisible());
			}
			function setVisible(value){
				multiselect.setVisible(value);
			}
			function getSelectedValues(){
				alert(multiselect.getValue());
			}
			function getSelectedTexts(){
				alert(multiselect.getSelectedTexts());
			}
			function getJqObjByValue(){
				var itm = multiselect.getJqObjByValue($('#input').val(),$('#input2').val());
				alert('title:'+multiselect.getInfoByJqObj(itm).title+',text:'+multiselect.getInfoByJqObj(itm).text+',value:'+multiselect.getInfoByJqObj(itm).value);
			}
			function getJqObjByText(){
				var itm = multiselect.getJqObjByText($('#input').val(),$('#input2').val());
				alert('title:'+multiselect.getInfoByJqObj(itm).title+',text:'+multiselect.getInfoByJqObj(itm).text+',value:'+multiselect.getInfoByJqObj(itm).value);
			}
			function getJqObjByIndex(){
				var itm = multiselect.getJqObjByIndex($('#input').val()*1,$('#input2').val());
				alert('title:'+multiselect.getInfoByJqObj(itm).title+',text:'+multiselect.getInfoByJqObj(itm).text+',value:'+multiselect.getInfoByJqObj(itm).value);
			}
			function delAllItems(){
				multiselect.delAllItems();
			}
			function getSelectedCount(){
				alert(multiselect.getSelectedCount());
			}
			function getItemsCount(){
				alert(multiselect.getItemsCount());
			}
			function toggleItem(){
				var itm = multiselect.getJqObjByIndex($('#input').val()*1,$('#input2').val());
				multiselect.toggleItem(itm);
			}
			function delItems(){
				var itm = multiselect.getJqObjByIndex($('#input').val()*1,$('#input2').val());
				multiselect.delItems(itm);
			}
			function delRightItems(){
				multiselect.delRightItems();
			}
			function moveitem(){
				var itm = multiselect.getJqObjByIndex($('#input').val()*1,$('#input2').val());
				switch($('#input').val()*1){
					case 0:
						multiselect.moveItemUpper();
						break;
					case 1:
						multiselect.moveItemUp();
						break;
					case 2:
						multiselect.moveItemAllRight();
						break;
					case 3:
						multiselect.moveItemRight();
						break;
					case 4:
						multiselect.moveItemLeft();
						break;
					case 5:
						multiselect.moveItemAllLeft();
						break;
					case 6:
						multiselect.moveItemDown();
						break;
					case 7:
						multiselect.moveItemDowner();
						break;
				}
			}
			function getSelectedObjs(){
				alert(multiselect.getSelectedObjs());
			}
			function reset(){
				multiselect.reset();
			}
		</script>
	</head>
	<body>
		<div id='button'>
			<input id='input'/><input id='input2'/>
			<button onclick='render();'>加载render</button>
			<button onclick='getwidth();'>获取宽度getwidth</button>
			<button onclick='setwidth();'>改变宽度setwidth(value)</button>
			<button onclick='getviewrow();'>获取行数getviewrow</button>
			<button onclick='setviewrow();'>改变行数setviewrow()</button>
			<button onclick='setDisabled(true);'>禁用组件setDisabled(false)</button>
			<button onclick='setDisabled(false);'>启用组件setDisabled(true)</button>
			<button onclick='getDisabled();'>查看是否禁用getDisabled()</button>
			<button onclick='getVisible();'>查看是否显示getVisible()</button>
			<button onclick='setVisible(true);'>显示组件setVisible(true)</button>
			<button onclick='setVisible(false);'>隐藏组件setVisible(false)</button>
			<button onclick='getSelectedValues();'>获取选中的值getSelectedValues</button>
			<button onclick='getSelectedTexts();'>获取选中的文本getSelectedTexts</button>
			<button onclick='getJqObjByValue();'>getJqObjByValue，getInfoByJqObj</button>
			<button onclick='getJqObjByText();'>getJqObjByText，getInfoByJqObj</button>
			<button onclick='getJqObjByIndex();'>getJqObjByIndex，getInfoByJqObj</button>
			<button onclick='delAllItems();'>删除所有项delAllItems</button>
			<button onclick='getSelectedCount();'>获取选中的个数getSelectedCount</button>
			<button onclick='getItemsCount();'>取得列表项的数量getItemsCount</button>
			<button onclick='toggleItem();'>模拟点击选项toogleItem</button>
			<button onclick='delItems();'>模拟删除选项delItems</button>
			<button onclick='delRightItems();'>删除右边框delRightItems</button>
			<button onclick='moveitem();'>模拟按动箭头moveitem</button>
			<button onclick='getSelectedObjs();'>获取选中的对象</button>
			<button onclick='reset();'>重置</button>
		</div>
		<div id='container'></div>
	</body>
</html>